<!--
 * @Author: fishroom
 * @Date: 2021-08-25 21:26:00
 * @LastEditTime: 2021-08-25 21:26:01
 * @FilePath: \repose\src\components\content\pie\Pie.vue
-->
<template>
  <div>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="item*percent" />
      <v-axis />
      <v-legend dataKey="item" />
      <v-pie
        position="percent"
        color="item"
        :v-style="pieStyle"
        :label="labelConfig"
      />
      <v-coord type="theta" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require("@antv/data-set");

const sourceData = [
  { item: "酒店", count: 12 },
  { item: "仓储", count: 12 },
  { item: "养殖场", count: 12 },
  { item: "营地", count: 12 },
  { item: "靶场", count: 26 }
];

const scale = [
  {
    dataKey: "percent",
    min: 0,
    formatter: ".0%"
  }
];

const dv = new DataSet.View().source(sourceData);
dv.transform({
  type: "percent",
  field: "count",
  dimension: "item",
  as: "percent"
});
const data = dv.rows;

export default {
  data() {
    return {
      data,
      scale,
      height: 400,
      pieStyle: {
        stroke: "#fff",
        lineWidth: 1
      },
      labelConfig: [
        "percent",
        {
          formatter: (val, item) => {
            return item.point.item + ": " + val;
          }
        }
      ]
    };
  }
};
</script>
